<template>
  <div>
    <el-dialog :title="info.isadd?'角色添加':'角色编辑'" :visible.sync="info.isshow" @closed="closed">
      <el-form :model="form">
        <el-form-item label="活动名称" label-width="120px">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="活动期限" label-width="120px">
          <el-date-picker
            value-format="timestamp"
            v-model="value1"
            type="datetimerange"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="一级分类" label-width="120px">
          <el-select v-model="form.first_cateid" @change="firstCateChange">
            <el-option label="--请选择--" disabled value></el-option>
            <el-option v-for="i in catelist" :key="i.id" :label="i.catename" :value="i.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" label-width="120px">
          <el-select v-model="form.second_cateid" @change="secondCateChange">
            <el-option label="--请选择--" disabled value></el-option>
            <el-option v-for="i in arr1" :key="i.id" :label="i.catename" :value="i.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" label-width="120px">
          <el-select v-model="form.goodsid">
            <el-option label="--请选择--" disabled value></el-option>
            <el-option v-for="i in arr2" :key="i.id" :label="i.goodsname" :value="i.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" label-width="120px">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="add" v-if="info.isadd">确 定</el-button>
        <el-button type="primary" @click="update" v-else>修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqcatelist,
  reqgoodslist,
  reqseckadd,
  reqseckedit,
  reqseckinfo,
} from "../../../request/api";
import { errorAlert, successAlert } from "../../../utils/alert";
import { mapActions, mapGetters } from "vuex";
export default {
  props: ["info"],
  data() {
    return {
      form: {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 2,
      },
      arr1: [], //二级分类
      value1: "",
      arr2: [], //二级分类
    };
  },
  computed: {
    ...mapGetters({
      catelist: "cate/list", //分类商品列表
      list: "seck/list",
    }),
  },
  mounted() {
    if (this.catelist.length === 0) {
      this.reqlist();
    }
    this.reqseck();
  },
  methods: {
    closed() {
      if (!this.info.isadd) {
        this.emity();
      }
    },
    ...mapActions({
      reqlist: "cate/reqlist", //请求商品列表
      reqseck: "seck/reqseck",
    }),
    firstCateChange() {
      //获取二级列表
      this.form.second_cateid = "";
      this.qerji();
    },
    qerji() {
      reqcatelist({
        pid: this.form.first_cateid,
      }).then((res) => {
        if (res.data.code == 200) {
          this.arr1 = res.data.list ? res.data.list : [];
        }
      });
    },
    // 点击二级商品分类获取对应分类商品列表
    secondCateChange() {
      this.form.goodsid = "";
      // console.log(this.form.first_cateid, this.form.second_cateid);
      this.sp();
    },
    sp() {
      reqgoodslist({
        fid: this.form.first_cateid,
        sid: this.form.second_cateid,
      }).then((res) => {
        this.arr2 = res.data.list ? res.data.list : [];
      });
    },
    emity() {
      this.form = {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 2,
      };
      this.arr1 = [];
      this.arr2 = [];
      this.value1 = "";
    },
    qx() {
      this.info.isshow = false;
    },
    checkEmpty() {
      return new Promise((resolve, reject) => {
        if (this.form.title == "") {
          errorAlert("活动名称不能为空");
          return;
        }
        if (this.value1 == "") {
          errorAlert("活动期限不能为空");
          return;
        }
        if (this.form.first_cateid == "") {
          errorAlert("一级分类不能为空");
          return;
        }
        if (this.form.second_cateid == "") {
          errorAlert("二级分类不能为空");
          return;
        }
        if (this.form.goodsid == "") {
          errorAlert("商品不能为空");
          return;
        }
        resolve();
      });
    },
    add() {
      this.checkEmpty().then(() => {
        this.form.begintime = this.value1[0];
        this.form.endtime = this.value1[1];
        reqseckadd(this.form).then((res) => {
          if (res.data.code === 200) {
            successAlert(res.data.msg);
            this.qx();
            this.emity();
            this.reqseck();
          }
        });
      });
    },
    getOne(id) {
      reqseckinfo({ id: id }).then((res) => {
        // console.log(res);
        this.form = res.data.list;
        this.qerji();
        this.sp();
        this.form.id = id;
        this.value1 = [this.form.begintime, this.form.endtime];
      });
    },
    update() {
      this.checkEmpty().then(() => {
        this.form.begintime = this.value1[0];
        this.form.endtime = this.value1[1];
        reqseckedit(this.form).then((res) => {
          successAlert(res.data.msg);
          this.qx();
          this.reqseck();
        });
      });
    },
  },
};
</script>

<style scoped>
.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>